
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:untitled/pages/FlutterUI/Shopping/detail/color_dot.dart';
import 'package:untitled/pages/FlutterUI/Shopping/detail/detail_buy.dart';
import 'package:untitled/pages/FlutterUI/Shopping/detail/detail_info.dart';
import 'package:untitled/pages/FlutterUI/Shopping/detail/detail_number.dart';
import 'package:untitled/utils/constants.dart';

class ProductDetail extends StatelessWidget {
  const ProductDetail({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: mPrimaryColor,
      appBar:buildAppBar(context),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(padding: EdgeInsets.symmetric(horizontal: 24,vertical: 12),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "Aristocratic Hang Bag",
                style: TextStyle(
                  color: Colors.white
                ),
              ),
              Text(
                "Office Code",
                style: TextStyle(
                  color:Colors.white,
                  fontSize: 30,
                  fontWeight: FontWeight.bold
                ),
              )
            ],
          ),
          ),
          Expanded(
            child: Stack(
              children:[
                Container(
                  width: double.infinity,
                  margin:EdgeInsets.only(top: 150),
                  padding:EdgeInsets.fromLTRB(24, 50, 24, 10),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(24),
                      topRight: Radius.circular(24),
                    )
                  ),
                  child: Column(
                    children:[
                      Row(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text("Color"),
                              SizedBox(height: 6,),
                              Row(
                                children: [
                                  DetailColorDot(color: mPrimaryColor,check: true),
                                  DetailColorDot(color: mSizeYellowColor),
                                  DetailColorDot(color: mSizeGreyColor),

                                  SizedBox(width: 100),
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text("Size"),
                                      SizedBox(height:6),
                                      Text(
                                        "12cm",
                                        style: TextStyle(
                                          fontSize: 18,
                                          fontWeight: FontWeight.bold
                                        ),
                                      )
                                    ],
                                  )
                                ],
                              ),
                              
                            ],
                          )
                        ],
                      ),
                      SizedBox(height: 20,),
                       Text(
                        'Lorem Ipsum is simply dummy text of the printing and typesetting industry. '
                        'Lorem Ipsum has been the industry\'s standard dummy text ever since. '
                        'When an unknown printer took a galley.',
                        style: TextStyle(
                            color: mPrimaryTextColor,
                            fontSize: 13,
                            height: 1.5),
                      ),
                      SizedBox(height: 20,),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          DetailNumber(),
                          Container(
                            width: 32,
                            height: 32,
                            padding: const EdgeInsets.all(8),
                            decoration: BoxDecoration(
                              color: mRedColor,
                              borderRadius: BorderRadius.circular(50),
                            ),
                            child: SvgPicture.asset(
                              'assets/images/heart.svg',
                              color: Colors.white,
                            ),
                          )

                        ],
                      ),
                      SizedBox(
                        height: 32,
                      ),
                      DetailBuy()

                    ]
                  ),
                ),
                DetailInfo()
              ]
            )
          )
        ],
      ),
    );
    
  }

  AppBar buildAppBar(context){
    return AppBar(
      brightness: Brightness.light,
      backgroundColor:mPrimaryColor,
      elevation: 0,
      leading: InkWell(
        onTap: () {
          Navigator.pop(context);
        },
        child: Padding(
          padding: const EdgeInsets.all(12),
          child: SvgPicture.asset(
            'assets/images/back.svg',
            width: 24,
            height: 24,
            color: Colors.white,
          ),
        ),
      ),
      actions: <Widget>[
        Padding(
          padding: const EdgeInsets.all(12),
          child: SvgPicture.asset(
            'assets/images/search.svg',
            width: 24,
            height: 24,
            color: Colors.white,
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(12),
          child: SvgPicture.asset(
            'assets/images/cart.svg',
            width: 24,
            height: 24,
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}